<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="个人信息填写" />
    <!-- /导航栏 -->


    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="user.name"
          name="userName"
          label="姓名"
          readonly
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="user.idCode"
          readonly
          name="idCode"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />

       <van-field
          v-model="user.sexLabel"
          is-link
          readonly
          name="userSex"
          label="性别"
          placeholder="点击选择性别"
          @click="sexShowPicker = true"
          arrow-direction="down" center
        />
        <van-popup v-model:show="sexShowPicker" position="bottom">
          <van-picker
            value-key="dictLabel"
            :columns="sexList"
            :default-index="sexShowPickerDefaultIndex"
            show-toolbar
            @confirm="onSexConfirm"
            @cancel="sexShowPicker = false"
          />
        </van-popup>
        <van-field
          v-model="user.nationLabel"
          is-link
          readonly
          name="userNation"
          label="民族"
          placeholder="点击选择民族"
          @click="nationShowPicker = true"
          arrow-direction="down" center
        />
        <van-popup v-model:show="nationShowPicker" position="bottom">
          <van-picker
            value-key="dictLabel"
            :columns="nationList"
            :default-index="nationShowPickerDefaultIndex"
            show-toolbar
            @confirm="onNationConfirm"
            @cancel="nationShowPicker = false"
          />
        </van-popup>
        <van-field
          v-model="user.politicalLabel"
          is-link
          name="userPolitical"
          label="政治面貌"
          placeholder="点击选择政治面貌"
          @click="politicalShowPicker = true"
          arrow-direction="down" center
        />
        <van-popup v-model:show="politicalShowPicker" position="bottom">
          <van-picker
            value-key="dictLabel"
            :columns="politicalList"
            :default-index="politicalShowPickerDefaultIndex"
            show-toolbar
            @confirm="onPoliticalConfirm"
            @cancel="politicalShowPicker = false"
          />
        </van-popup>

        <!--<van-field
          v-model="user.postLabel"
          is-link
          name="userPost"
          label="职务"
          placeholder="点击选择职务"
          @click="postShowPicker = true"
          arrow-direction="down" center
        />
        <van-popup v-model:show="postShowPicker" position="bottom">
          <van-picker
            value-key="dictLabel"
            :columns="postList"
            :default-index="postShowPickerDefaultIndex"
            show-toolbar
            @confirm="onPostConfirm"
            @cancel="postShowPicker = false"
          />
        </van-popup>
        -->
        <van-field
          v-model="user.post"
          name="userPost"
          label="职务"
          placeholder="职务"
          :rules="[{ required: true, message: '请填写职务' }]"
        />
        <van-field
          v-model="user.technicalTitleLabel"
          is-link
          name="userTechnicalTitle"
          label="职称"
          placeholder="点击选择职称"
          @click="technicalTitleShowPicker = true"
          :rules="[{ required: true, message: '请填写职称' }]"
          arrow-direction="down" center
        />
        <van-popup v-model:show="technicalTitleShowPicker" position="bottom">
          <van-picker
            value-key="dictLabel"
            :columns="technicalTitleList"
            :default-index="technicalTitleShowPickerDefaultIndex"
            show-toolbar
            @confirm="onTechnicalTitleConfirm"
            @cancel="technicalTitleShowPicker = false"
          />
        </van-popup>
        <van-field
          v-model="user.address"
          name="userAddress"
          label="通信地址"
          placeholder="请输入通信地址"
        />

      </van-cell-group>

      <van-row gutter="20" style="margin-top:16px">
      <van-col span="3">
       </van-col>
        <van-col span="8">
          <van-button  block type="danger" @click="preStep">
            上一步
          </van-button>
        </van-col>
        <van-col span="2">
       </van-col>
        <van-col span="8">
          <van-button  block type="primary" native-type="submit">
            下一步
          </van-button>
                <van-col span="3">
       </van-col>
        </van-col>

      </van-row>



    </van-form>
    <!-- /登录表单 -->
  </div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import { getDicts,updGrExaminer } from "@/api/grantexaminer/grantexaminer";
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      sexShowPicker:false,
      nationShowPicker:false,
      politicalShowPicker:false,
      technicalTitleShowPicker:false,
      postShowPicker:false,
      sexShowPickerDefaultIndex:0,
      nationShowPickerDefaultIndex:0,
      politicalShowPickerDefaultIndex:0,
      technicalTitleShowPickerDefaultIndex:0,
      postShowPickerDefaultIndex:0,
      loginInfo:{},
      user: {
        name: '',
        idCode: '',
        sex: '',
        sexLabel: '',
        nation: '',
        nationLabel: '',
        political: '',
        politicalLabel: '',
        post: '',
        postLabel: '',
        technicalTitle: '',
        technicalTitleLabel: '',
        address:''
      },
      sexList:[],
      nationList:[],
      politicalList:[],
      technicalTitleList:[],
      postList:[],
      userFormRules: {
        mobile: [{
          required: true,
          message: '手机号不能为空'
        }, {
          pattern: /^1[3|5|7|8|9]\d{9}$/,
          message: '手机号格式错误'
        }],
        code: [{
          required: true,
          message: '验证码不能为空'
        }, {
          pattern: /^\d{6}$/,
          message: '验证码格式错误'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    console.log('process.env.VUE_APP_BASE_API',process.env.VUE_APP_BASE_API)
    if(localStorage.getItem('userInfo')==''||localStorage.getItem('userInfo')==null)
    {
      this._routeReplace('loginPage');
      return;
    }
    else
    {
      this.loginInfo = JSON.parse(localStorage.getItem('userInfo'));
      console.log( this.loginInfo);
      this.user.name = this.loginInfo.name
      this.user.idCode = this.loginInfo.idcard
      this.user.post = this.loginInfo.post
		  this.user.address = this.loginInfo.addr

      getDicts('sys_user_sex').then(res=>{
        if(res.code===200){
          this.sexList = res.data
        }
        else{
          this.sexList = []
        }
        this.sexList.forEach((item,index)=>
        {
          if(item.dictValue==this.loginInfo.sex){
            this.user.sex = this.loginInfo.sex
            this.user.sexLabel = item.dictLabel
            this.sexShowPickerDefaultIndex = index
            return
          }
        })

      })
      getDicts('mz_dict').then(res=>{
        if(res.code===200){
          this.nationList = res.data
        }
        else{
          this.nationList = []
        }
        this.nationList.forEach((item,index)=>
        {
          if(item.dictValue==this.loginInfo.nation){
            this.user.nation = this.loginInfo.nation
            this.user.nationLabel = item.dictLabel
            this.nationShowPickerDefaultIndex = index
            return
          }
        })
      })
      getDicts('zzmm_dict').then(res=>{
        if(res.code===200){
          this.politicalList = res.data
        }
        else{
          this.politicalList = []
        }
        this.politicalList.forEach((item,index)=>
        {
          if(item.dictValue==this.loginInfo.political){
            this.user.political = this.loginInfo.political
            this.user.politicalLabel = item.dictLabel
            this.politicalShowPickerDefaultIndex = index
            return
          }
        })
      })
      getDicts('technical_title').then(res=>{
        if(res.code===200){
          this.technicalTitleList = res.data
        }
        else{
          this.technicalTitleList = []
        }
        this.technicalTitleList.forEach((item,index)=>
        {
          if(item.dictValue==this.loginInfo.technicalTitle){
            this.user.technicalTitle = this.loginInfo.technicalTitle
            this.user.technicalTitleLabel = item.dictLabel
            this.technicalTitleShowPickerDefaultIndex = index
            return
          }
        })
      })
      /*getDicts('sys_post').then(res=>{
        if(res.code===200){
          this.postList = res.data
        }
        else{
          this.postList = []
        }
        this.postList.forEach((item,index)=>
        {
          if(item.dictValue==this.loginInfo.post){
            this.user.post = this.loginInfo.post
            this.user.postLabel = item.dictLabel
            this.postShowPickerDefaultIndex = index
            return
          }
        })
      })*/

    }


  },
  mounted () {},
  methods: {

    onSexConfirm(val) {
      this.sexShowPicker = false
      this.user.sex = val.dictValue
      this.user.sexLabel = val.dictLabel
    },
    onNationConfirm(val) {
      this.nationShowPicker = false
      this.user.nation = val.dictValue
      this.user.nationLabel = val.dictLabel
    },
    onPoliticalConfirm(val) {
      this.politicalShowPicker = false
      this.user.political = val.dictValue
      this.user.politicalLabel = val.dictLabel
    },
    onTechnicalTitleConfirm(val) {
      this.technicalTitleShowPicker = false
      this.user.technicalTitle = val.dictValue
      this.user.technicalTitleLabel = val.dictLabel
    },
    onPostConfirm(val) {
      this.postShowPicker = false
      this.user.post = val.dictValue
      this.user.postLabel = val.dictLabel
    },
    preStep(){
      localStorage.setItem('backflag','1');
      this._routeReplace('loginPage');
    },

    async onSubmit () {


      // 3. 提交表单请求登录
      this.$toast.loading({
        message: '保存中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {

        this.loginInfo.post = this.user.post
        this.loginInfo.addr = this.user.address
        this.loginInfo.sex = this.user.sex
        this.loginInfo.nation = this.user.nation
        this.loginInfo.political = this.user.political
        this.loginInfo.technicalTitle = this.user.technicalTitle

        const res = await updGrExaminer(this.loginInfo)
        if(res.code===200){
          localStorage.setItem('userInfo', JSON.stringify(this.loginInfo));
          this.$toast.success('保存成功')
          this._routeReplace('enroll');
        }else{
          this.$toast.fail(res.msg)
        }


      } catch (err) {

        this.$toast.fail('保存失败，'+err.msg)

      }


    }
  }
}
</script>
<style scoped lang="less">
.login-container {
  .toutiao {
    font-size: 37px;
  }
  .send-sms-btn {
    width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    padding: 53px 33px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
    }
  }
}
</style>
